<template>
  <view class="demo-index-list">
    <fu-index-list :indexes="Object.keys(cityList)" @select="onSelect">
      <fu-index-list-item 
        v-for="(group, index) in cityList" 
        :key="index"
        :index="index"
      >
        <view 
          class="city-item"
          v-for="(city, cityIndex) in group" 
          :key="cityIndex"
          @tap="onCitySelect(city)"
        >
          {{ city }}
        </view>
      </fu-index-list-item>
    </fu-index-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cityList: {
        'A': ['阿克苏', '安康', '安庆', '鞍山', '安顺'],
        'B': ['北京', '保定', '包头', '宝鸡', '巴中'],
        'C': ['重庆', '成都', '长沙', '长春', '常州'],
        'D': ['大连', '东莞', '大理', '德阳', '德州'],
        'E': ['鄂尔多斯', '恩施', '鄂州'],
        'F': ['福州', '佛山', '抚顺', '防城港'],
        'G': ['广州', '贵阳', '桂林', '赣州'],
        'H': ['杭州', '合肥', '海口', '哈尔滨'],
        'J': ['济南', '嘉兴', '金华', '九江'],
        'K': ['昆明', '开封', '喀什'],
        'L': ['兰州', '拉萨', '洛阳', '柳州'],
        'M': ['绵阳', '马鞍山', '牡丹江'],
        'N': ['南京', '南昌', '南宁', '宁波'],
        'P': ['莆田', '盘锦', '攀枝花'],
        'Q': ['青岛', '泉州', '秦皇岛'],
        'R': ['日照', '日喀则'],
        'S': ['上海', '深圳', '苏州', '沈阳'],
        'T': ['天津', '太原', '泰州', '唐山'],
        'W': ['武汉', '无锡', '温州', '乌鲁木齐'],
        'X': ['西安', '厦门', '徐州', '西宁'],
        'Y': ['烟台', '扬州', '宜昌', '银川'],
        'Z': ['郑州', '珠海', '中山', '遵义']
      }
    }
  },
  
  methods: {
    onSelect(index) {
      console.log('选择的索引:', index);
    },
    
    onCitySelect(city) {
      uni.showToast({
        title: `选择了城市: ${city}`,
        icon: 'none'
      });
    }
  }
}
</script>

<style>
.demo-index-list {
  height: 100vh;
}

.city-item {
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
  font-size: 28rpx;
}
</style> 